<script setup lang="ts">
import { User } from '$/client'
import { getGenderText } from '$/vexip/presets'
import ComCtl from '@/components/ComCtl.vue'
import { Comments, Users } from '@/scripts/client-copilot'
import { useRequest } from 'alova/client'
import { Card as VCard } from 'vexip-ui'

const { data: copilot } = useRequest(Users.retrieve, {
  initialData: User.inst()
})
const { data: comments } = useRequest(Comments.list, {
  initialData: []
})
</script>

<template>
  <ComCtl content-class="flex flex-col gap-4">
    <VCard class="mx-auto w-200" :title="copilot.name">
      <template #extra>
        <div>性别：{{ getGenderText(copilot.gender) }}</div>
      </template>
      <div class="flex flex-col gap-4">
        <div class="flex gap-4 items-center">
          <img class="bg-white size-[200px] rounded-2xl object-cover" :src="copilot.avatar" alt="" />
          <div class="flex flex-col">
            <div class="flex gap-2">
              <div>备注:</div>
              <div>{{ copilot.description ?? 'None' }}</div>
            </div>
            <div>评论 {{ comments.length }} 条</div>
          </div>
        </div>
        <div class="flex flex-col gap-1">
          <div v-for="i in comments" :key="i.id">{{ i.user.name }} : {{ i.content }}</div>
        </div>
      </div>
    </VCard>
  </ComCtl>
</template>
